<template>
	<view class="vipbox">
		<view class="user">
			<image class="userpic" :src="pic" mode=""></image>
			<view>
				<view v-if="level==0" style="font-size: 14px;">普通会员</view>
				<view v-else-if="level==1" style="font-size: 14px;">银卡会员</view>
				<view v-else-if="level==2" style="font-size: 14px;">金卡会员</view>
				<view v-else-if="level==3" style="font-size: 14px;">钻石会员</view>
				<view style="font-size: 12px; color: #9f9f9f;">更多优惠可亲临场馆介绍说明</view>
			</view>
		</view>
		<view class="vipnav">
			<view class="vipdengj" v-for="(item,index) in list">
				<image class="vippic" :src="item.image" mode=""></image>
				<view v-if="item.level==0" style="font-size: 14px;">普通会员</view>
				<view v-else-if="item.level==1" style="font-size: 14px;">银卡会员</view>
				<view v-else-if="item.level==2" style="font-size: 14px;">金卡会员</view>
				<view v-else-if="item.level==3" style="font-size: 14px;">钻石会员</view>
				<view class="viptit">会员权益</view>
				<view class="viptext">会员可享受特殊权益会员有效期{{item.days}}天</view>
				<view class="vipbay">
					<view class="vippric"><text style="font-size: 12px;">￥</text>{{item.money}}</view>
					<view class="gomai" @click="gotoopen(item)" >立即充值</view>
				</view>
			</view>
		</view>
		<view class="vitext">
			<view class="" style="font-size: 14px;">用户须知</view>
			<view class="" style="font-size: 12px;color: #9f9f9f;" v-html="configInfo"></view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '../../utils/request';
onMounted(()=>{
	const userinfo = uni.getStorageSync('userinfo')
	pic.value=userinfo.avatar
	level.value=userinfo.level
	token.value= uni.getStorageSync('token')
	chongzhi()
	getConfig()
})
let level=ref(0)
let pic=ref('')
let token=ref('')
let configInfo = ref('')
let list=ref([
	{pic:'/static/logo.png',tit:'钻石会员',pric:'2000.00'},
	{pic:'/static/logo.png',tit:'金卡会员',pric:'600.00'},
	{pic:'/static/logo.png',tit:'银卡会员',pric:'300.00'}
])
const gotoopen=(item)=>{
	const level=item.level
	uni.navigateTo({
		url: '/pages/openvip/openvip?info=' + JSON.stringify(item)
	})
}
const chongzhi=()=>{
	request.post('Index/LevelLists',{header:{
		"token":token.value
	}}).then(res=>{
		console.log(res);
		list.value=res.data
	}).catch(err=>{
		console.log(err);
	})
}

const getConfig = () => {
	request.get('index/getConfigs',{header:{
		"token":token.value,
		'Content-Type': 'application/x-www-form-urlencoded'
	}, data: {
		name: 'yonghuxuzhi'
	}}).then(res=>{
		configInfo.value=res.data.value
	}).catch(err=>{
		console.log(err);
	})
}
</script>

<style scoped>
	.vipbox{
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
	}
	.user{
		width: 100%;
		height: 170rpx;
		display: flex;
		align-items: center;
	}
	.userpic{
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		margin-left: 40rpx;
		margin-right:24rpx ;
	}
	.vipnav{
		width: 100%;
		height: fit-content;
		padding-left: 30rpx;
		display: flex;
		overflow-x: scroll;
		
	}
	.vipdengj{
		width:540rpx;
		height: fit-content;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		padding-top:30rpx;
		margin-right: 20rpx;
		box-shadow: 0 0 24px -10px rgba(0, 0, 0, .3);
		box-sizing: border-box;
	}
	.vippic{
		width: 500rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	.viptit{
		margin-top: 50rpx;
		margin-bottom: 30rpx;
		font-size: 14px;
	}
	.viptext{
		font-size: 12px;
	}
	.vipbay{
		margin-top: 200rpx;
		display: flex;
		justify-content: space-between;
	}
	.vippric{
		color: #10c696;
		display: flex;
		align-items: center;
		font-size: 20px;
		margin-left: 40rpx;
	}
	.gomai{
		width: 180rpx;
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		color:#fff;
		background-color: #10c696;
		border-radius: 40rpx;
		margin-right: 40rpx;
	}
	.vitext{
		margin-top:40rpx;
		padding-left:40rpx;
	}
</style>
